<template>
  <a-popover trigger="click" position="left">
    <a-button-group>
      <a-button size="mini">
        <template #icon>
          <span v-if="icon" :class="icon" />
        </template>
        <span>选择图标</span>
      </a-button>
      <a-button size="mini" @click.stop="icon = ''">X</a-button>
    </a-button-group>
    <template #content>
      <div class="bi-icon-search">
        <a-input placeholder="搜索图标" size="small" allow-clear @input="handleSearch">
          <template #append>
            <a-select size="small" class="w-20" v-model="iconType">
              <a-option key="line" label="线性" value="line" />
              <a-option key="fill" label="填充" value="fill" />
            </a-select>
          </template>
        </a-input>
      </div>
      <div class="bi-icon">
        <span v-for="item in iconsList" :key="item">
          <a-button
            :title="item.name"
            class="bi-icon-span"
            :class="`bi-${item.icon}${item.type !== 'Editor' ? `-${iconType}` : ''}`"
            @click="icon = `bi-${item.icon}${item.type !== 'Editor' ? `-${iconType}` : ''}`"
          />
        </span>
      </div>
      <a-pagination
        v-if="iconsList.length"
        size="small"
        :page-size="72"
        :total="list.length"
        hide-on-single-page
        show-total
        @change="iconsPage"
      />
    </template>
  </a-popover>
</template>

<script setup>
import { useVModel } from "@vueuse/core"
import icons from "./tags.json"
import tool from "@/utils/tool.js"
const list = ref([])
Object.keys(icons).forEach((item) => {
  const key = Object.entries(icons[item])
  key.forEach((v) => {
    list.value.push({
      type: item,
      name: v[1],
      icon: v[0]
    })
  })
})
// 图标类型 线性 填充
const iconType = ref("line")
const iconsList = ref([])
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  }
})
const emit = defineEmits(["update:modelValue"])
const icon = useVModel(props, "modelValue", emit)
const iconsPage = (page) => {
  iconsList.value = g.page(list.value, page, 72)
}
//搜索图标
const handleSearch = (value) => {
  list.value = tool.searchEvent(value, list.value, ["name"], "icon")
  iconsList.value = g.page(list.value, 1, 72)
}
iconsPage(1)
</script>
<style scoped lang="less">
.bi-icon-search {
  margin-bottom: 10px;
}

.bi-icon {
  @apply grid grid-cols-6 gap-2;
  .bi-icon-span {
    margin-bottom: 5px;
  }
}
</style>
